<template>
	<div class="unity-body-div" v-loading="loadingall" element-loading-background="rgba(0, 0, 0, 0.9)">
		<!-- <div class="unity_close">
      <i class="el-icon-close" style="cursor: pointer" @click="toClose" v-if="!operationTips"></i>
    </div> -->
<!-- 		<close @click.native="toClose"></close> -->

		<!-- <div class="unity-body-center-right" :class="operationTips?'toleft':''">
			<div class="unity_close_two" v-if="operationTips">
				<i class="el-icon-arrow-left" style="cursor: pointer" @click="Closetips"></i>
			</div>


			<div class="posi_title">
				<div class="">
					<div style="font-size: 24px;z-index:999;padding: 0 3vw;" v-if="!operationTips">
						径流深预测洪水
					</div>
					<div class="" style="font-size: 24px;z-index:999;padding: 0 3vw;" v-if="operationTips">操作提示
					</div>
					<div class="  color-gradient-blue"
						style="width: 100%;height: 15px;border-radius: 6px;margin-top: -10px;"></div>
				</div>

				

			</div>
		</div> -->
		<div class="unity-body-center" style="padding: 20px  2.4vw;" v-if="!operationTips">
			<!-- <div class="rain" style="z-index: 99999999;width: 100%; display:flex;justify-content: flex-end;">
				<el-form class="demo-form-inline indoor-scene-buzhou-list-form" :inline="true" @submit.native.prevent>

					<el-form-item label="24小时径流深(mm):" label-width="140px"
						style="margin-top: 5px; margin-bottom: 5px;z-index: 99999999;">
						<el-select v-model="rain_p" @change="" style="z-index: 99999999;" @change="searchList()">

							<el-option v-for="item in allp" :key="item.id" :label="item.name" :value="item.id"
								style="z-index: 99999999;">
							</el-option>
						</el-select>
					</el-form-item>
					 <el-form-item label="时间间隔(分钟):" label-width="120px" style="margin-top: 5px; margin-bottom: 5px;">
						<el-input @clear="searchList" v-model="interval" placeholder="请输入时间间隔" type="number"
							@keyup.native.enter="searchList()"></el-input>
					</el-form-item>
					<el-form-item style="margin-top: 5px; margin-bottom: 5px;margin-left: 10px;">
						<el-button type="primary" @click="searchList()">确定</el-button>
					</el-form-item> -->
				<!-- </el-form> -->
			<!-- </div> --> 

			<div class="chart" style="position: relative;">
				<!-- <div class="change_date">
					<div :class="!ifrain?'choosedate':'change_date_item'" @click="changeDate(false)">
						洪水量
					</div>
					<div :class="ifrain?'choosedate':'change_date_item'" @click="changeDate(true)">
						降水量
					</div>

				</div> -->
				<div style="width:100%;height:400px;z-index:9;" ref='main1'></div>
			</div>
		</div>

	</div>




	</div>





	<!-- </div> -->


</template>

<script>
	import {
		Message
	} from "element-ui";
	import StringUtils from "../../utils/string"
	import UnityIm from "../../utils/unityIm"
	import bigCenterTitle from "@/components/unityweb/big-center-title";
	import close from "@/components/unityweb/close";
	import back from "@/components/unityweb/back";
	import axios from 'axios'

	export default {
		name: "deviceSmall",
		components: {
			'big-center-title': bigCenterTitle,
			close,
			back
		},
		data() {
			return {
				u_getVideoDetial: '',
				operationTips: false,
				myplayer: null,
				appId: 'lc4f8f9576ada04180', //水系连通
				appSecret: 'd06df43f5f4e43e4bf3184a9561f29', //水系连通
				// appId: 'lc2368cda43106467b',//klp
				// appSecret: '431e679db19e4071949f853a609bca',//klp
				deviceId: '',
				time: '',
				nonce: '',
				nonce2: '',
				sign: '',
				sign2: '',
				id: '',
				accessToken: '',
				kitToken: '',
				parmas: '',
				ifsb: false,
				from: 'videoSurveillance',
				loading: false,
				loadingall: false,
				isfull: false,

				rainstormList: {
					// time: [],
					// flood: [],
					// instantFlood: [],
					// instantRain: [],
					// rain: []
				},
				rain_p:100,

				allp: [{
						id: 100,
						name: '100'
					},
					{
						id: 200,
						name: '200'
					}, {
						id: 400,
						name: '400'
					}, {
						id: 800,
						name: '800'
					}
				],
				interval: 10,
				ifrain: false

			};
		},
		created() {
			var _this = this
			// this.parmas = {
			//   id: 188
			// }
			// this.u_getToken();

			// var appId = 'lc4f8f9576ada04180'
			// var appId = 'lc2368cda43106467b'//klp

			this.getDetial()

		},
		mounted() {
			window.addEventListener('message', (event) => {
				//event.data获取传过来的数据
				let _obj = event.data;
				let method_name = _obj.methodName || '';
				let paramsStr = _obj.parameterData || '';
				let params = StringUtils.toJson(paramsStr);
				if (_obj.managerType == 'open') {
					// this.getDetial();
				} else if (_obj.managerType == 'close') {} else if (_obj.managerType == 'cancelSelected') {}
			});
			if (window.vuplex) {
				this.addMessageListener15();
			} else {
				// 初始化侦听器
				window.addEventListener("vuplexready", this.addMessageListener15);
			}
			// setTimeout(()=>{
			// 	this.$nextTick(() => {
			//       this.createVideo()
			//     })
			// },1000)

		},
		methods: {

			addMessageListener15() {
				UnityIm.receiveUnityOpenMessage((method_name, params) => {
					// this.getDetial();
				});
			},

			//时间转换
			timezh(item) {
				const date = item ? new Date(item) : new Date();
				var y = date.getFullYear();
				var m = date.getMonth() + 1;
				m = m < 10 ? ('0' + m) : m;
				var d = date.getDate();
				d = d < 10 ? ('0' + d) : d;
				var h = date.getHours();
				h = h < 10 ? ('0' + h) : h;
				var minute = date.getMinutes();
				minute = minute < 10 ? ('0' + minute) : minute;
				var second = date.getSeconds();
				second = second < 10 ? ('0' + second) : second;
				return y + '-' + m + '-' + d
			},
			//设备状态
			sbstate(item) {
				switch (item) {
					case "0":
						return '正常'
						break;
					case "1":
						return '异常'
						break;
					case "2":
						return '故障'
						break;
				}
			},
			//获取详
			getDetial() {
				var _this = this
				axios({
					headers: {
						'Access-Control-Allow-Origin': '*',
						withCredentials: true
					},
					method: 'get',
					// url: 'http://124.160.33.135:4078/evo-apigw/admin/API/DMS/Ptz/OperateDirect',
					// url: 'http://192.168.55.155:8080/scene-demo/admin/operate-direct',
					// url: '/api/sdu/rainfall/getflood?p=' + _this.rain_p + '&interval=' + _this
					// 	.interval,
					// url: 'http://mahe.jnaw.top/event/getflood?p=' + _this.rain_p + '&interval=' + _this
					// 	.interval,
					// url: 'http://192.168.55.56/runoff/'+_this.rain_p+'/6'
                   url: 'http://39.106.30.94:5000/f1th1/100/1',

					// data: JSON.stringify(params)
				}).then(res => {
					var datalist = res.data
					for (let i in datalist.W) {
						datalist.W[i] = datalist.W[i] / 10000
					}
					_this.rainstormList = JSON.parse(JSON.stringify(datalist))
					// for (let i in datalist) {
					// 	// if()
					// 	// _this.rainstormList.time.push(datalist[i].time/60)
					// 	// _this.rainstormList.flood.push(datalist[i].flood/10000)
					// 	// _this.rainstormList.instantFlood.push(datalist[i].instantFlood)
					// 	// _this.rainstormList.instantRain.push(datalist[i].instantRain)
					// 	// _this.rainstormList.rain.push(datalist[i].rain)
					// 	_this.rainstormList.time  = 

					// }

					_this.$nextTick(() => {
						_this.chartDetial()
					})

				}).catch(err => {

				})


			},
			chartDetial(item) {
				var _this = this
				// 基于准备好的dom，初始化echarts实例  这个和上面的main对应

				let myChart = this.$echarts.init(_this.$refs.main1)
				// console.log(myChart)
				var item = _this.rainstormList
				// console.log(11)
				// 指定图表的配置项和数据
				// console.log(item)
				let option = {
					//调整此处大小即可控制空白
					grid: {
						x: 20,
						y: 35,
						x2: 25,
						y2: 15,
						containLabel: true
					},
					legend: {
						// data: _this.ifrain ? ['瞬时雨量', '总降雨量'] : ['瞬时洪水量', '总洪水量'],
						data: ['洪水过程线'],
						textStyle: {
							// fontSize: 18,//字体大小
							color: '#ffffff', //字体颜色
						}


					},
					xAxis: {
						name:'h',
						//  nameLocation:'start',
						  nameTextStyle:{
							  color:'rgba(255, 255, 255, 1)',
						  },
						//    nameGap:'20',
						type: "category",
						boundaryGap: false,
						data: item.flood_time,
						axisTick: {
							show: false
						},
						axisLine: {
							lineStyle: {
								color: "rgba(255, 255, 255, 1)"
							}
						},
						axisLabel: {
							color: "rgba(255, 255, 255,1)",
							// rotate: 40,
							//x轴间隔显示
							interval: 'auto'
						}
					},
					dataZoom: [
						// {
						// 	type: "slider", //滑动条型数据区域缩放组件
						// 	realtime: true, //拖动时，是否实时更新系列的视图。如果设置为 false，则只在拖拽结束的时候更新。
						// 	start: 0, //数据窗口范围的起始百分比。范围是：0 ~ 100。表示 0% ~ 100%。
						// 	//              end: 100,  // 数据窗口范围的结束百分比。范围是：0 ~ 100
						// 	height: 100,
						// 	endValue: 66, //数据窗口范围的结束数值。如果设置了 dataZoom-inside.end 则 endValue 失效
						// 	fillerColor: "rgba(255, 255, 255, 0)", // 滚动条颜色
						// 	borderColor: "rgba(255, 255, 255, 0)",
						// 	handleSize: 0, // 两边手柄尺寸
						// 	showDetail: false, // 拖拽时是否展示滚动条两侧的文字
						// 	top: "96%", //组件离容器上侧的距离
						// 	zoomLock: true // 是否只平移不缩放
						// 	// moveOnMouseMove:true, //开启鼠标移动窗口平移
						// 	// zoomOnMouseWheel :true, //开启鼠标滚轮缩放
						// },
						// {
						// 	type: "inside", //内置型数据区域缩放组件
						// 	// start: 0,
						// 	//              end: 100,
						// 	endValue: 24, // 最多12个
						// 	zoomOnMouseWheel: false, // 关闭鼠标滚轮缩放
						// 	moveOnMouseWheel: true, // 开启鼠标滚轮窗口平移
						// 	moveOnMouseMove: true // 开启鼠标移动窗口平移
						// }
					],
					yAxis: _this.ifrain ? [{
							type: "value",
							// name: "m",
							name: 'mm',
							nameTextStyle: {
								color: "rgba(255, 255, 255, 1.0)"
							},

							axisTick: {
								show: false
							},
							axisLine: {
								lineStyle: {
									color: "rgba(255, 255, 255, 1.0)"
								}
							},
							splitLine: {
								show: false,
								lineStyle: {
									color: ["#ccc"],
									width: 1,
									type: "dashed"
								}
							},
							axisLabel: {
								color: "rgba(255, 255, 255, 1.0)",


							}
						}, {
							type: "value",
							// name: "m",
							name: 'mm',
							nameTextStyle: {
								color: "rgba(255, 255, 255, 1.0)"
							},

							axisTick: {
								show: false
							},
							axisLine: {
								lineStyle: {
									color: "rgba(255, 255, 255, 1.0)"
								}
							},
							splitLine: {
								show: false,
								lineStyle: {
									color: ["#ccc"],
									width: 1,
									type: "dashed"
								}
							},
							axisLabel: {
								color: "rgba(255, 255, 255, 1.0)",
							}
						},

					] : [{
							type: "value",
							// name: "m",
							name: 'm³/s',
							nameTextStyle: {
								color: "rgba(255, 255, 255, 1.0)"
							},

							axisTick: {
								show: false
							},
							axisLine: {
								lineStyle: {
									color: "rgba(255, 255, 255, 1.0)"
								}
							},
							splitLine: {
								show: false,
								lineStyle: {
									color: ["#ccc"],
									width: 1,
									type: "dashed"
								}
							},
							axisLabel: {
								color: "rgba(255, 255, 255, 1.0)",
							}
						},
						// {
						// 	type: "value",
						// 	// name: "m",
						// 	name: '10⁴m³',
						// 	nameTextStyle: {
						// 		color: "rgba(255, 255, 255, 1.0)"
						// 	},
						// 	axisTick: {
						// 		show: false
						// 	},
						// 	axisLine: {
						// 		lineStyle: {
						// 			color: "rgba(255, 255, 255, 1.0)"
						// 		}
						// 	},
						// 	splitLine: {
						// 		show: false,
						// 		lineStyle: {
						// 			color: ["#ccc"],
						// 			width: 1,
						// 			type: "dashed"
						// 		}
						// 	},
						// 	axisLabel: {
						// 		color: "rgba(255, 255, 255, 1.0)",
						// 	}
						// },

					],


					tooltip: {
						// trigger: "item"
						trigger: "axis",
						// formatter: function(param) {
						// 	// console.log(param[0]);
						// 	var value = param[0];
						// 	return (
						// 		'<div style="font-size: 16px;"> ' +
						// 		value.name +
						// 		"：" +
						// 		value.value +
						// 		unit +
						// 		"</div>"
						// 	);
						// }
						axisPointer: {
							type: 'line'
						}
					},
					toolbox: {
						// feature: {
						//   dataView: { show: true, readOnly: false },
						//   magicType: { show: true, type: ['line', 'bar'] },
						//   restore: { show: true },
						//   saveAsImage: { show: true }
						// }
					},

					label: {
						show: false,
						position: "bottom",
						textStyle: {
							fontSize: 20
						}
					},
					textStyle: {
						color: "#000"
					},

					series: _this.ifrain ? [{
							type: "line",
							name: '瞬时雨量',
							// barGap: 0,
							color: ["#00fff0"],
							symbolSize: 0,
							data: item.rain,
							smooth: true,
							yAxisIndex: 0,
							lineStyle: {
								// color: '#5470C6',
								// width: 4,
								type: 'dashed'
							},

						},

						{
							type: "line",
							name: '总降雨量',
							// barGap: 0,
							color: ["#399bff"],
							symbolSize: 0,
							data: item.rainsum,
							smooth: true,
							yAxisIndex: 1,
							lineStyle: {
								// color: '#5470C6',
								// width: 4,
								type: 'solid'
							},

						}
					] : [


						{
							type: "line",
							// name: '洪水过程线',
							// barGap: 0,
							color: ["#ffffff"],
							symbolSize: 0,
							data: item.flood,
							yAxisIndex: 0,
							smooth: true,
							lineStyle: {
								color: '#ffaa00',
								width: 2,
								type: 'solid'
							},
							
// symbol: 'emptyCircle' ,

						},
						// {
						// 	type: "line",
						// 	name: '总洪水量',
						// 	// barGap: 0,
						// 	color: ["#ff7c12"],
						// 	symbolSize: 0,
						// 	data: item.W,
						// 	yAxisIndex: 1,
						// 	smooth: true,
						// 	lineStyle: {
						// 		// color: '#5470C6',
						// 		// width: 4,
						// 		type: 'solid'
						// 	},

						// }

					]
				};


				// 使用刚指定的配置项和数据显示图表。
				option && myChart.setOption(option);
			},
			searchList() {
				if (this.interval == '' || this.interval == 0 || this.interval == null || this.interval == undefined) {
					Message.warning('时间间隔不能为0或空')
					return
				}
				if (this.interval < 0) {
					Message.warning('时间间隔不能为负数')
					return
				}
				this.rainstormList = {
					time: [],
					flood: [],
					instantFlood: [],
					instantRain: [],
					rain: []
				}
				this.getDetial()
			},
			changeDate(item) {
				this.ifrain = item
				// sconsole.log(11)
				this.$nextTick(() => {
					this.chartDetial()
				})
			},
			toClose() {
				UnityIm.closePanelManager('engineerWatchQuery');
			},
			opentips() {
				this.operationTips = true
			},
			Closetips() {
				this.operationTips = false
			},

		}
	}
</script>

<style lang="scss" scoped>
	@import url('../../assets/css/unity.scss');
	@import url('https://dongping.jnaw.top/demo/index.css');


	.unity-body-div {
		padding: 35px;

		/*background: rgba(5, 15, 26, 0.5) !important;*/
	}


	.unity-body-center {
		margin-top: 0px;
		display: flex;
		width: 100%;
		box-sizing: border-box;
		flex-direction: column;
		align-items: center;
		// justify-content: center;
		// padding: 11px 6.8vw;
		// border: 1px solid rgba(255, 255, 255, 0.6);
		// overflow: hidden;
		// height: 100%;


	}

	.height_video {

		height: calc(100vh - 179px) !important;
		width: 82vw !important;
		;
	}

	.height_video_all {
		position: absolute !important;
		left: 0;
		top: 0;
		padding: 0;
		margin: 0;
		height: 100vh !important;
		width: 100vw !important;
		;
	}

	.unity-body-center-right {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-right: 4.6vw;
		position: relative;
		height: 35px;

	}

	.toleft {
		justify-content: flex-start;
	}

	.unity-body-center-left-top {
		// margin: 0 auto;
		justify-self: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		font-size: 18px;
		font-family: siyuan_bold;
		font-weight: bold;
		color: #FFFFFF;

		// justify-self: center;


	}

	table {
		width: 100%;
		height: 100%;
		// border: 1px solid #000;
		// border: 1px dashed #000;
		border-collapse: collapse;


	}

	td {
		align-items: center;
		// text-align: center;
		padding-left: 10vw;
		font-size: 14px;
		color: #fff;
		width: 50%;
	}

	.td1 {
		border-bottom: 1px dashed rgba(255, 255, 255, 0.6);
		border-right: 1px dashed rgba(255, 255, 255, 0.6);

	}

	.td2 {
		border-bottom: 1px dashed rgba(255, 255, 255, 0.6);
		border-left: 1px dashed rgba(255, 255, 255, 0.6);

	}

	.unity_close {


		position: absolute;
		top: 25px;
		right: 25px;

		i {
			font-size: 40px;
			color: #fff;
		}
	}

	.operate {
		display: flex;
		align-items: center;
		font-size: 18px;
		color: #fff;
		z-index: 999999
	}

	.operate_picture {
		display: flex;
		align-items: center;

		i {
			font-size: 28px;
			margin-right: 1.1vw;

		}


	}

	.operate_gang {
		width: 1px;
		background-color: #fff;
		height: 26px;
		margin: 0 2.1vw;
	}

	.unity_close_two {
		color: #fff;
		z-index: 9999;

		i {
			position: relative;
			padding-right: 10px;
			font-size: 40px;
		}
	}

	.posi_title {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #FFFFFF;
	}

	.chart {
		// margin-top: 40px;
		width: 100%;
		height: 400px;
		z-index: 99;
	}

	.change_date {
		position: absolute;
		right: 0px;
		top: 9px;
		display: flex;
		z-index: 9999999999
	}

	.choosedate {
		width: 60px;
		height: 24px;
		margin-right: 9px;
		border-radius: 2px;
		font-weight: 400;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		background: linear-gradient(37deg, #2DC1FF 0%, #3083FF 99%);
	}

	.change_date_item {
		width: 60px;
		height: 24px;
		margin-right: 9px;
		border: 1px solid #0083FD;
		border-radius: 2px;
		font-weight: 400;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>
<style>
	.rain .el-form--inline .el-form-item__label {
		color: #FFFFFF !important;
	}

	.rain .el-form--inline .el-input__inner {
		height: 35px !important;
		/* width:140px !important ; */
		background-color: transparent;
		border-color: #FFFFFF;
		color: #FFFFFF;
	}
</style>
